{% load static %}
<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="{% static 'css/font.css' %}">
        <link rel="stylesheet" href="{% static 'css/xadmin.css' %}">
        <script src="{% static 'lib/layui/layui.js' %}" charset="utf-8"></script>
        <script type="text/javascript" src="{% static 'js/xadmin.js' %}"></script>
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-sm12 layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">最新一周请求数量</div>
                        <div class="layui-card-body" style="min-height: 280px;">
                            <div id="main1" class="layui-col-sm12" style="height: 300px;"></div>

                        </div>
                    </div>
                </div>
                <div class="layui-col-sm12 layui-col-md6">
                    <div class="layui-card" >
                        <div class="layui-card-header">漏洞数量分布</div>
                        <div class="layui-card-body" style="min-height: 280px">
                            <div id="main2" class="layui-col-sm12" style="height: 300px;"></div>

                        </div>
                    </div>
                </div>
                <div class="layui-col-sm12 layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">漏洞数量占比</div>
                        <div class="layui-card-body" style="min-height: 280px;">
                            <div id="main4" class="layui-col-sm12" style="height: 300px;"></div>

                        </div>
                    </div>
                </div>
                <div class="layui-col-sm12 layui-col-md6">
                    <div class="layui-card">
                        <div class="layui-card-header">数据大小(100G/all)</div>
                        <div class="layui-card-body" style="min-height: 280px;">
                            <div id="main3" class="layui-col-sm12" style="height: 300px;"></div>

                        </div>
                    </div>
                </div>
            </div>

        </div>
        </div>
    
        <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
        <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main1'));

        // 指定图表的配置项和数据
        var option = {
            grid: {
                top: '5%',
                right: '1%',
                left: '1%',
                bottom: '10%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: ['今天','昨天','三天前','四天前','五天前','六天前','七天前']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name:'请求数量',
                data: [{{ nowdata }}, {{ onedata }}, {{ twodata }}, {{ threedata }}, {{ fourdata }}, {{ fivedata }}, {{ sixdata }}],
                type: 'line',
                smooth: true
            }]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        // 基于准备好的dom，初始化echarts实例
        var myChart2 = echarts.init(document.getElementById('main2'));

        // 指定图表的配置项和数据
        var option2 = {
            grid: {
                top: '5%',
                left: '1%',
                right: '1%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                data: ['SQL注入','XSS','目录发现','命令注入','代码执行','文件遍历','XXE','备份文件','SSRF','链接跳转','敏感文件','反序列化']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [{{ sqlall }},{{ xss }},{{ dirscan }},{{ cmd_injection }},{{ code_injection }},{{ path_traversal }},{{ xxe }},{{ brute_force }},{{ ssrf }},{{ redirect }},{{ sensitive }},{{ baseline }}],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(220, 220, 220, 0.8)'
                }
            }]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart2.setOption(option2);


        // 基于准备好的dom，初始化echarts实例
        var myChart3 = echarts.init(document.getElementById('main3'));
        var option3 = {
            tooltip : {
                formatter: "{a} <br/>{b} : {c}%"
            },
            series: [
                {
                    name: '硬盘使用量',
                    type: 'gauge',
                    detail: {formatter:'{{ raw }}%'},
                    data: [{value: {{ raw }}, name: '已使用'}]
                }
            ]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart3.setOption(option3);

        var myChart4 = echarts.init(document.getElementById('main4'));

        option4 = {

            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['SQL注入','XSS','目录发现','命令注入','代码执行','文件遍历','XXE','备份文件','SSRF','链接跳转','敏感文件','反序列化']
            },
            series: [
                {
                    name: '漏洞占比',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '50%'],
                    data: [
                        {value: {{ sqlall }}, name: 'SQL注入'},
                        {value: {{ xss }}, name: 'XSS'},
                        {value: {{ dirscan }}, name: '目录发现'},
                        {value: {{ cmd_injection }}, name: '命令注入'},
                        {value: {{ code_injection }}, name: '代码执行'},
                        {value: {{ path_traversal }}, name: '文件遍历'},
                        {value: {{ xxe }}, name: 'XXE'},
                        {value: {{ brute_force }}, name: '备份文件'},
                        {value: {{ ssrf }}, name: 'SSRF'},
                        {value: {{ redirect }}, name: '链接跳转'},
                        {value: {{ sensitive }}, name: '敏感文件'},
                        {value: {{ baseline }}, name: '反序列化'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        myChart4.setOption(option4);

    </script>

    </body>
</html>